<template>
    <div v-if="!isLogin">
        <HeaderComponents :open_btn="hideMenu" @menuHideShow="hideMenu=!hideMenu"/>
        <LeftComponents :is-collapse="!hideMenu"/>
        <div :class="setContentCls">
            <el-scrollbar>
                <router-view/>
            </el-scrollbar>
        </div>
    </div>
    <router-view v-else/>
</template>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}

.vea-content {
  position: fixed;
  box-sizing: border-box;
  top: 45px;
  left: 235px;
  bottom: 5px;
  right: 0;
  overflow-y: auto;
  padding-right: 15px;

  &.vea-content-left {
    left: 80px !important;
  }
}
</style>
<script setup>
import HeaderComponents from "@/components/veaHeaderComponents/HeaderComponents.vue";
import LeftComponents from "@/components/veaHeaderComponents/LeftComponents.vue";
import {computed, ref, watch} from "vue";
import {useRoute} from "vue-router";

const hideMenu = ref(false);
const setContentCls = computed(() => {
    let cls = "vea-content";
    if (hideMenu.value) {
        cls += ' vea-content-left';
    }
    return cls;
})
const route = useRoute()
const isLogin = computed(() => {
    return route.name === 'login';
})
</script>